<template>
  <div class="scroll">
      <div class="scroll-x">X:{{ scrollX }}</div>
      <div class="scroll-y"> Y:{{ scrollY }}</div>
  </div>
  <div class="move">
      <div class="move-x">X:{{ moveX }}</div>
      <div class="move-y"> Y:{{ moveY }}</div>
  </div>
  <div>{{ data }}</div>
</template>

<script>
import useScroll from '../../hooks/useScroll'
import useMove from '../../hooks/useMousePosition'
import userLocalStorage from '../../hooks/userLocalStorage'
export default {
  setup () {
    const { scrollX, scrollY } = useScroll()
    const { moveX, moveY } = useMove()
    const data = userLocalStorage('info', { name: 'zs', age: 30 })
    return {
      scrollX,
      scrollY,
      moveX,
      moveY,
      data
    }
  }
}
</script>

<style scoped>
.scroll {
    width: 100px;
    height: 100px;
    position: fixed;
    background-color: lightblue;
    right: 10px;
    bottom: 10px;
}
.move {
    position: fixed;
    right: 10px;
    bottom: 150px;
}
</style>
